import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableWithoutFeedback, Image, ImageBackground } from 'react-native'
import { connect } from 'react-redux'
import RotateView from '../../../../components/RotateView'
import MyIcon from '../../../../utils/MyIcon'

const IconColor = "#e9e9e9"

const styles = StyleSheet.create({
  actionBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  actionItem: {
    paddingHorizontal: 16
  },
  album: {
    width: 236,
    height: 236,
    position: 'relative'
  },
  albumImage: {
    width: 160,
    height: 160,
    position: 'absolute',
    top: 38,
    left: 38,
    borderRadius: 80
  }
})

class Album extends Component {
  render() {
    return (
      <TouchableWithoutFeedback onPress={this.props.onClick}>
        <View style={{flex: 1, flexDirection: 'column'}}>
          <View style={{flex: 1, paddingTop: 100, flexDirection:'row', justifyContent: 'center'}}>
            <RotateView style={styles.album} playing={this.props.playing}>
              <ImageBackground style={styles.album} source={require('../../../../assets/playing_page_disc.png')}>
                <Image style={styles.albumImage} source={require('../../../../assets/bg.jpg')}/>
              </ImageBackground>
            </RotateView>
          </View>
          <View style={styles.actionBar}>
            <View style={styles.actionItem}>
              <MyIcon name="play" size={26} color={IconColor}/>
            </View>
            <View style={styles.actionItem}>
              <MyIcon name="play" size={26} color={IconColor}/>
            </View>
            <View style={styles.actionItem}>
              <MyIcon name="play" size={26} color={IconColor}/>
            </View>
            <View style={styles.actionItem}>
              <MyIcon name="play" size={26} color={IconColor}/>
            </View>
            <View style={styles.actionItem}>
              <MyIcon name="play" size={26} color={IconColor}/>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
}

export default connect(
  state => {
    return {
      playing: state.playing
    }
  },
  {

  }
)(Album)